<!-- ElementUI 列表展示、条件查询、分页展示-->
<template>
    <div>
        <!-- 搜索框 clearable:清除搜索框内容 -->
        <el-input placeholder="请输入姓名" size="medium" v-model="queryDto.name" clearable></el-input>
        <!-- 下拉列表 -->
        <el-select placeholder="请选择性别" size="medium" v-model="queryDto.sex" clearable>
            <el-option value="男"></el-option>
            <el-option value="女"></el-option>
        </el-select>
        <el-select placeholder="请选择年龄" size="medium" v-model="queryDto.age" clearable>
            <el-option value="0,20" label="0~20岁"></el-option>
            <el-option value="21,40" label="21~40岁"></el-option>
            <el-option value="41,60" label="41~60岁"></el-option>
        </el-select>
        <el-button type="primary" size="medium" @click="query">查询</el-button>
        <el-divider></el-divider>
        <el-table :data="students">
            <el-table-column prop="id" label="编号"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="sex" label="性别"></el-table-column>
            <el-table-column prop="age" label="年龄"></el-table-column>
        </el-table>
        <el-pagination 
            :total="total"
            :page-size="queryDto.size"
            :current-page="queryDto.page"
            layout="prev,pager,next,sizes,->,total"
            :page-sizes="[5,10,15,20]"
            @current-change="onCurrentChange"
            @size-change="onSizeChange"
        ></el-pagination>
    </div>
</template>

<script>
import axios from '../util/myaxios';
const options = {
    //刚开始加载执行此方法
    mounted() {
        this.query();
    },
    //方法
    methods: {
        onCurrentChange(page){
            //拿到点击的页码
            this.queryDto.page = page;
            this.query();
        },
        onSizeChange(size){
            this.queryDto.size = size;
            this.query();
        },
        //统一查询方法
        async query(){
            const resp = await axios.get('/api/students/q',{
                params: this.queryDto
            })
            this.students = resp.data.data.list;
            this.total = resp.data.data.total;
        },
        //条件查询
        search(){
            this.query();
        }
    },
    //数据
    data() {
        return {
            students: [],
            queryDto:{
                name:'',
                sex:'',
                age:[],
                page: 1,
                size: 10
            },
            total: 0
        }
    }
}
export default options;
</script>

<style scoped>
/* div {
    width: 100%;
    justify-content: center;
    align-items: center;
} */
.el-input--medium,
.el-select--medium {
    width: 200px;
    margin:10px 10px 0 0;
}
</style>